<template>
  <el-table
    ref="tableData"
    :data="tableData"
    max-height="250"
    border
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      width="40"/>
    <el-table-column
      v-for="(item,index) in tableList"
      :key="index"
      :label="item.label"
      :width="item.width">
      <template slot-scope="scope">
        {{ scope.row[item.data] }}
      </template>
    </el-table-column>
    <!-- <el-table-column v-if="operatingoState" label="操作" width="185px">
      <template slot-scope="scope"> -->
    <!-- <el-button
            size="mini"
            icon="el-icon-edit-outline"
            @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button
            size="mini"
            icon="el-icon-delete"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
    <!-- <bug-operation/>
      </template>
    </el-table-column> -->
  </el-table>
</template>

<script>
import pagination from '@/components/pagination/index'
import bugOperation from '@/components/operation/bug-operation'
export default {
  components: {
    pagination,
    bugOperation
  },
  props: {
    // table数据
    tableData: {
      type: Array,
      default: () => ({})
    },
    // 表头名称
    tableList: {
      type: Array,
      default: () => ({})
    },
    // 操作隐藏显示状态
    operatingoState: {
      type: Boolean,
      default: Boolean
    }
  },
  data() {
    return {
      // tableData: [],
      // tableList: [
      //   { label: 'ID', width: '110' },
      //   { label: '所属项目', width: '180' },
      //   { label: '任务名称', width: '180' },
      //   { label: '创建', width: '180' },
      //   { label: '指派给', width: '180' },
      //   { label: '由谁完成', width: '180' },
      //   { label: '预计时间', width: '180' },
      //   { label: '消耗时间', width: '180' },
      //   { label: '状态', width: '120' }
      // ],
      paginations: {
        totalNum: 50,
        currentPage: 1,
        pageSize: 10
      },
      deleteDepArry: []// 删除arr
    }
  },

  methods: {
    // 行内数据改变触发，用于顶层多数据删除
    handleSelectionChange(val) {
      this.deleteDepArry = []
      // this.multipleSelection = val
      // val.forEach(element => {
      //   this.deleteDepArry.push(element.id)
      // })
      console.log(this.deleteDepArry)
      this.$emit('deleteArry', val)
    },
    // 改变分页的时候查询数据
    handleSizeChange(val) {
      // console.log(val)
      this.$emit('handleSizeChange', val)
      // this.SearchDep.pageSize = val
      // this.getDeparList()
    },
    // 当前页数据查询
    handleCurrentChange(val) {
      // this.SearchDep.pageNum = val
      // this.getDeparList()
      this.$emit('handleCurrentChange', val)
    },
    // 行内编辑
    handleEdit(index, row) {
      this.$emit('handleEdit', row)
      // this.addForm = {
      //   orgKey: row.orgKey
      // }
      // this.changeDep('edit')
      // this.dialogFormVisible = true
      // this.dialogTitle = '机构修改'
    },
    // 行内删除
    handleDelete(index, row) {
      this.$emit('handleDelete', row)
      // this.$refs.tableData.clearSelection()
      // this.deleteDepArry = []
      // this.deleteDepArry.push(row.orgKey)
      // this.deleteDepar()
    }
  }
}
</script>

<style lang="scss">
.box-card .el-table .cell{
  text-align: center !important;

}
.el-table__body-wrapper{
  //overflow: hidden !important;
  // overflow: scroll;
  // height: 200px;
  // &::-webkit-scrollbar{
  //   display: none;
  // }
}
.el-table td.gutter, .el-table th.gutter{
  width: 0px !important;
  //display: none!important;
  border-right-width: 0px;
}
.titleBox{
    display: flex;
    justify-content: space-between;
    .el-icon-search{
      font-size: 24px;
      cursor: pointer;
    }
}
</style>
